<template>
  <div class="withdraw">
    <!-- 选项卡 -->
    <el-tabs v-model="param.status">
      <el-tab-pane label="所有提现" name="all"></el-tab-pane>
      <el-tab-pane label="待提现" name="待提现"></el-tab-pane>
      <el-tab-pane label="已提现" name="已提现"></el-tab-pane>
      <el-tab-pane label="拒绝提现" name="拒绝提现"></el-tab-pane>
    </el-tabs>
    <!-- 提现列表 -->
    <!-- 表格 -->
    <el-table :data="withdraws" size="small" >
      <el-table-column label="#" type="index" :index="1" width="80"></el-table-column>
      <el-table-column label="员工姓名" prop="employee.realname" width="90"></el-table-column>
      <el-table-column label="金额" prop="money" width="80"></el-table-column>
      <el-table-column label="提现时间" width="160">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{getTime(scope.row.transactionTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="详情" prop="description"></el-table-column>
      <el-table-column label="状态" prop="type" width="80"></el-table-column>
      <el-table-column label="操作" width="160" align="center">
        <template v-slot="scope">
          <el-button type="primary" size="mini" @click="check(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      param: {
        status: "all"
      },
      visible: false,
      withdraws: [],
    };
  },
  created() {
    this.loadWithdraws();
  },
  watch: {
    // 监听param的变化，一旦变化立刻查询
    param: {
      handler: function() {
        this.loadWithdraws();
      },
      deep: true
    }
  },
  methods: {
    // 加载提现信息
    loadWithdraws() {
      // 1. 克隆param
      let param = Object.assign({}, this.param);
      let url = "http://47.92.81.116:8888/check/findAllWithdrawal";
      // 2. 处理数据
      // 当状态为all，说明查询所有提现，不对提现状态进行过滤，将这个属性置为"提现"
      if (param.status == "all") {
        param.status = "提现";
      }
      get(url, param).then(response => {
        this.withdraws = response.data;
      });
    },
    check(row) {
      let url = "http://47.92.81.116:8888/check/updateStatus";
      post(url, { id: row.id, amount: row.money }).then(response => {
        this.$message({ type: "success", message: response.message });
        this.loadWithdraws();
      });
    },
    getTime(time) {
      return new Date(parseInt(time))
        .toLocaleString()
        .replace(/:\d{1,2}$/, " ");
    }
  }
};
</script>